<template>
  <div>
    <a-modal title="选择规则" :visible="visible" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <div>
        <FilterTable :filterItem="filterItem" :is-show-tag="false" :isReset="true" @search="searchByVal" />
        <a-table size="mini" class="table-two-line" :data="list" :pagination="false" row-key="id" v-model:selected-keys="ids" :row-selection="rowSelection">
          <template #columns>
            <a-table-column title="规格中文名称" #cell="{ record }">{{ record.nameCn }}</a-table-column>
            <a-table-column title="规格标识" #cell="{ record }"> {{ record.nameEn }} </a-table-column>
          </template>
        </a-table>
      </div>
      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" class="ml10" @click="handleOk">确认</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { pageProductSpec, removeProductSpec } from '@/api/product'
  import FilterTable from '@/components/TableFilter.vue'

  export default defineComponent({
    props: [],
    components: { FilterTable },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data = reactive({
        loading: false,
        filterItem: [
          {
            type: 'input_keyword',
            key: 'nameCnList',
            keyItems: [
              { label: '规格中文名称', value: 'nameCnList' },
              { label: '规格英文名称', value: 'nameEnList' },
            ],
            keyWidth: '130',
            value: ref(),
            placeholder: '请输入',
            label: '规格中文名称',
            width: 160,
            isMultiple: false,
          },
        ],
        list: [],
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
        },
        ids: [],
      })

      const open = () => {
        getList()
      }
      const handleOk = () => {
        if (!data.ids[0]) {
          return Message.error('请选择规格')
        }
        let arr: any = []
        data.ids.forEach((e: any) => {
          let item = data.list.find((el: any) => e == el.id)
          arr.push(item)
        })
        data.ids = []
        emit('save', arr)
        handleCancel()
      }
      const handleCancel = () => {
        visible.value = false
      }
      const searchByVal = (info: any) => {
        getList(info)
      }

      const getList = async (info?: any) => {
        let params = {
          ...info,
          pageSize: 999999,
        }
        const res = await pageProductSpec(params)
        data.list = res?.data?.records
      }
      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        searchByVal,
      }
    },
  })
</script>

<style lang="less" scoped></style>
